<template>
  <GlobalContainer className="flex flex-col" :backgroundImage="`${OSS_URL}/images/baoxiu/head_bg.png`">
    <GlobalHeader title="提交订单" showBack :backgroundImage="`${OSS_URL}/images/baoxiu/head_bg.png`" :fixed="true" />
    <div class="pb-120 px-32">
      <div class="specification-c !mb-20">
        <template v-if="currentRoom.id">
          <div class="item-c flex items-center">
            <div class="value text-34 !ml-0 font-bold text-[#303133]">{{ formatRoom(currentRoom) }}</div>
          </div>
          <div class="item-c flex items-center">
            <div class="label">{{ contacts }} {{ phone }}</div>
          </div>
        </template>
        <template v-else>
          <div class="item-c flex items-center">{{ address }}</div>
          <div class="item-c flex items-center">
            <div class="label">{{ contacts }} {{ phone }}</div>
          </div>
        </template>
        <div class="mb-20 h-px bg-[#efefef]" />
        <div class="item-c flex">
          <div class="label mb-20 !w-auto">服务时间</div>
          <div class="value">
            <div>
              最早<span class="ml-10 text-[#303133]">{{ format(startTime, 'yyyy年MM月dd日 HH点') }}</span>
            </div>
            <div>
              最晚<span class="ml-10 text-[#303133]">{{ format(endTime, 'yyyy年MM月dd日 HH点') }}</span>
            </div>
          </div>
        </div>
        <div class="item-c flex items-center">
          <div class="label">规格</div>
          <div class="value">{{ activeSpecification.specValueNames }}</div>
        </div>
      </div>
      <div class="detail-c rounded-20 mb-20 bg-white px-32 py-24">
        <div class="cell-c">
          <div class="label font-bold text-[#303133]">{{ goodsDetail.title }}</div>
          <div class="content text-[#303133]">明细</div>
        </div>
        <div class="mb-24 h-px bg-[#efefef]" />

        <div class="cell-c">
          <div class="label">{{ activeSpecification.specValueNames }}</div>
          <div class="content">
            ￥{{ activeSpecification.salePrice }}<span v-if="activeSpecification.unit">/{{ activeSpecification.unit }}</span>
          </div>
        </div>
        <div class="cell-c">
          <div class="label">数量</div>
          <div class="content">{{ quantity }}</div>
        </div>
        <div class="cell-c">
          <div class="label">合计</div>
          <div class="content text-34 font-bold !text-[#F04864]">￥{{ activeSpecification.salePrice * quantity }}</div>
        </div>
      </div>
      <div class="remark-c rounded-20 mb-20 bg-white px-32 py-24">
        <div class="form-item">
          <div class="label text-[#303133]">留言</div>
          <div class="text-area">
            <wd-textarea
              v-model="remark"
              placeholder="请输入备注"
              :maxlength="100"
              custom-class="custom-class"
              custom-textarea-container-class="custom-class"
              custom-textarea-class="custom-class"
              show-word-limit
            />
          </div>
        </div>
      </div>
    </div>

    <div class="btn-c px-30 pb-safe py-20">
      <div class="btn" @tap="payHandle">立即支付</div>
    </div>
  </GlobalContainer>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useAccountStore } from '@/store'
import { getBuildingListApi } from '@/common/api/base'
import { createOrder, mallPayment } from '@/common/api/report'
import { showToast } from '@/utils/index'
import { format } from 'date-fns'
import { formatRoom } from '@/common/format'
const accountStore = useAccountStore()
const OSS_URL = import.meta.env.VITE_OSS_URL
const activeSpecification = ref({})
const quantity = ref(1)
const startTime = ref('')
const endTime = ref('')
const address = ref('')
const phone = ref('')
const contacts = ref('')
const goodsDetail = ref({}) // 商品详情

const currentRoom = ref(accountStore.currentRoom) // 当前房屋

const remark = ref('')
onLoad(options => {
  const detail = JSON.parse(decodeURIComponent(options.detail))
  goodsDetail.value = detail
  currentRoom.value = detail.currentRoom
  startTime.value = detail.startTime
  endTime.value = detail.endTime
  address.value = detail.address
  phone.value = detail.phone
  contacts.value = detail.contacts
  quantity.value = detail.quantity
  activeSpecification.value = detail.specification
})
const payHandle = () => {
  uni.showLoading({
    title: '提交中'
  })
  const params = {
    productId: goodsDetail.value.id,
    skuId: activeSpecification.value.id,
    num: quantity.value,
    serviceTime: startTime.value,
    serviceEndTime: endTime.value,
    phone: phone.value,
    contacts: contacts.value,
    remarks: remark.value
  }
  if (currentRoom.value.id) {
    params.roomId = currentRoom.value.id
    params.communityId = currentRoom.value.communityId
  } else {
    params.address = address.value
  }
  createOrder(params).then(res => {
    payOrder(res.orderNo, res.id)
  })
}
const payOrder = (orderNo, orderId) => {
  mallPayment({ mallOrderNo: orderNo }).then(res => {
    const { prepayId, nonceStr, timeStamp, paySign } = res
    uni.requestPayment({
      provider: 'wxpay',
      timeStamp: String(timeStamp),
      nonceStr: nonceStr,
      package: 'prepay_id=' + prepayId,
      signType: 'SHA256withRSA',
      paySign: paySign,
      orderInfo: {
        appId: '',
        timeStamp: String(timeStamp),
        nonceStr: nonceStr,
        package: ''
      },
      success: res => {
        console.log('[ res ] >', res)
        uni.switchTab({
          url: '/pages/home/index'
        })
      },
      fail: err => {
        uni.redirectTo({
          url: '/subPages/wuye/orderDetail?orderId=' + orderId
        })
      }
    })
  })
}
</script>
<style scoped lang="scss">
.specification-c {
  background: #ffffff;
  padding: 24rpx 32rpx;
  width: 686rpx;
  border-radius: 20rpx;
  margin: 0 auto;
  .item-c {
    padding: 8rpx 0;
    margin-bottom: 20rpx;
    line-height: 45rpx;
    .label {
      white-space: nowrap;
      font-size: 30rpx;
      font-weight: 400;
      color: #303133;
    }
    .value {
      margin-left: auto;
      font-size: 30rpx;
      color: #303133;
      margin-right: 24rpx;
    }
  }
}

.cell-c {
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
  font-weight: 400;
  line-height: 42rpx;
  font-size: 28rpx;
  .label {
    color: #606266;
  }
  .content {
    margin-left: auto;
    color: #606266;
  }
}

.remark-c {
  .form-item {
    margin-bottom: 30rpx;
    .label {
      font-weight: 400;
      font-size: 30rpx;
      line-height: 46rpx;
      color: #303133;
      margin-bottom: 16rpx;
    }
    .form-input {
      background: #f5f7fa;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      padding: 20rpx 24rpx;
      border: 1px solid #dcdfe6;
    }
    .upload-item {
      background: #fafafa;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      border: 1px solid #dcdfe6;
    }
    :deep(.custom-class) {
      background: #f5f7fa !important;
      font-size: 30rpx;
      color: #303133;
    }
    :deep(.text-area) {
      background: #f5f7fa;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 1px solid #dcdfe6;
    }
    :deep(.wd-textarea__count) {
      background-color: #f5f7fa;
    }
  }
}
.action-sheet-c {
  .item-c {
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #303133;
    background: #f6f9fb;
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    border: 2rpx solid #f6f9fb;
    margin-bottom: 16rpx;
  }
  .active {
    background: #e5f2ff;
    border: 2rpx solid #1e90ff;
  }
  .btn-c {
    position: relative !important;
  }
}
.btn-c {
  position: fixed;
  bottom: 12rpx;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: #fff;
  .btn {
    height: 94rpx;
    background: #1e90ff;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    text-align: center;
    line-height: 94rpx;
    color: #fff;
    font-size: 32rpx;
  }
}
</style>
